.a-list {
    // height: 150px;
    // overflow: hidden;
    // border: solid 1px #f0f0f0;
    // width: 200px;
    // margin: 10px auto;
    position: relative;
    .a-item {
        // height: 30px;
        background: var(--card);
        display: flex;
        align-items: center;
        justify-content: center;
        // border: solid 1px #f0f0f0;
    }
    .has {
        // animation: turnout 300ms;
        // animation-fill-mode: forwards;
        // transition: 200ms;
        transition: all 300ms;
    }
    .will {
        animation: turnin 300ms ease-in;
        animation-fill-mode: forwards;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        transform-origin: center top;
        // box-shadow: 0 0 10px rgb(189, 189, 189);
    }
}

@keyframes turnin {
    0% {
        transform: translateY(-40px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes turnout {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(100%);
    }
}
